<template>
	<el-dialog
	  :title="plan.planName + '的取样记录'"
	  :visible.sync="visible"
	  :before-close="close"
	  width="50%">
    <el-card>
      <el-form label-width="80px">
        <el-form-item label="入库量">
          {{ plan.incomingMini + ' ' + plan.incomingMiniUnitName }}(小单位)
        </el-form-item>
        <el-form-item label=" ">
          {{ plan.incomingBig + ' ' + plan.incomingBigUnitName }}(大单位)
        </el-form-item>
        <el-form-item label="库存量">
          {{ plan.inventory + ' ' + plan.inventoryUnitName }}
          <el-button type="danger" class="pan-btn danger-btn" icon="el-icon-plus" @click="changeInventory('add')" circle size="mini" />
          <el-button type="danger" class="pan-btn danger-btn" icon="el-icon-minus" @click="changeInventory('sub')" circle size="mini" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-table :data="books">
      <el-table-column
      	prop="planBookId"
      	header-align="center"
      	align="center"
      	label="编号" />
      <el-table-column
      	prop="flag"
      	header-align="center"
      	align="center"
      	label="标志">
        <template slot-scope="{row}">
          {{ row.flag == 1 ? '进' : '出' }}
        </template>
      </el-table-column>
      <el-table-column
      	header-align="center"
      	align="center"
      	label="量">
        <template slot-scope="{row}">
          {{ row.quantity + ' ' + row.unitName }}
        </template>
      </el-table-column>
      <el-table-column
      	header-align="center"
      	align="center"
      	label="余量">
        <template slot-scope="{row}">
          {{ row.surplus + ' ' + row.unitName }}
        </template>
      </el-table-column>
      <el-table-column
      	prop="remark"
      	header-align="center"
      	align="center"
      	label="理由" />
      <el-table-column
        prop="optUserName"
        header-align="center"
        align="center"
        label="操作人" />
      <el-table-column
        prop="optDate"
        header-align="center"
        align="center"
        label="操作时间"
        width="100">
        <template slot-scope="{row}">
          {{ row.optDate | changeTime }}
        </template>
      </el-table-column>
    </el-table>
	  <span slot="footer" class="dialog-footer">
	    <el-button type="primary" size="small" class="pan-btn primary-btn" @click="close">关 闭</el-button>
  	</span>

    <el-dialog
      :append-to-body="true"
      title="填写"
      :visible.sync="changeInventoryVisible"
      :before-close="closeInner"
      width="20%">
      <el-form label-width="80px">
        <el-form-item :label="opt == 'add' ? '增加量' : '减少量'">
          <el-input @change="setQuantity" v-model="changeBook.quantity" size="small">
            <template slot="append">{{ changeBook.unitName }}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="理由">
          <el-input v-model="changeBook.remark" size="small" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeInner" size="small">取 消</el-button>
        <el-button type="primary" size="small" class="pan-btn primary-btn" :load="submitingChange" @click="submitChange">确 定</el-button>
      </span>
    </el-dialog>
	</el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
	import { CODE_OK } from '@/common/js/config'
	import { isBlank,parseTime } from '@/common/js/utils'
  import { isPositiveNumber } from '@/common/js/validate'
  import { changeInventory } from '@/api/stability'
  import Calc from 'calculatorjs'
	export default {
		data() {
			return {
				visible: false,
        changeInventoryVisible: false,
        submitingChange: false,
        isChangedInventory: false,
        books: [],
        plan: {},
        changeBook: {},
        opt: ''
			}
		},
		props: ["childDataForm"],
		created() {
			if (!isBlank(this.childDataForm)) {
        this.plan = this.childDataForm.plan
        this.books = this.childDataForm.books
        this.flusBooks()
        this.visible = true
			}
		},
    computed: {
      ...mapGetters([
         'userInfo'
      ])
    },
		methods: {
      flusBooks() {
        let surplus = 0
        this.books = this.books.map(b => {
          let symbol = b.flag == 1 ? '+' : '-'
          surplus = Calc(surplus + symbol + b.quantity)
          this.$set(b, 'surplus', surplus)
          return b
        })
      },
      submitChange() {
        this.submitingChange = true
        if (this.changeBook.quantity == 0) {
          this.$message.error("不能为0")
          this.submitingChange = false
          return
        }
        if (isBlank(this.changeBook.remark)) {
          this.$message.error("理由不能为空")
          this.submitingChange = false
          return
        }
        changeInventory(this.changeBook).then(res => {
          if (res.code === CODE_OK) {
            this.$message.success("提交成功")
            this.isChangedInventory = true
            this.closeInner()
            this.$set(this.changeBook, 'planBookId', this.books[this.books.length-1].planBookId+1)
            this.books.push(this.changeBook)
            this.flusBooks()
            this.plan.inventory = this.changeBook.inventory
            this.changeBook = {}
          }else{
            this.$message.error(res.msg)
          }
        })
      },
      closeInner() {
        this.changeBook.quantity = null
        this.changeInventoryVisible = false
      },
      changeInventory(opt) {
        this.opt = opt
        if (opt == 'sub' && this.plan.inventory <= 0) {
          this.$message.error("已经没有剩余库存了")
          return
        }
        this.$set(this.changeBook, 'planId', this.plan.planId)
        this.$set(this.changeBook, 'flag', opt == 'sub' ? 2 : 1)
        this.$set(this.changeBook, 'inventory', this.plan.inventory)
        this.$set(this.changeBook, 'unitId', this.plan.inventoryUnitId)
        this.$set(this.changeBook, 'unitName', this.plan.inventoryUnitName)
        this.$set(this.changeBook, 'optUserId', this.userInfo.userId)
        this.$set(this.changeBook, 'optUserName', this.userInfo.name)
        this.$set(this.changeBook, 'optDate', parseTime(new Date()))
        this.changeInventoryVisible = true
      },
			close() {
        this.$emit('close')
        if (this.isChangedInventory) {
          this.$emit('reflushData')
        }
				this.visible = false
			},
      setQuantity() {
        if (!isPositiveNumber(this.changeBook.quantity)) {
          this.$message.error('请输入正数值类型')
          this.changeBook.quantity = null
        }
        this.changeBook.inventory = Calc(this.changeBook.inventory + (this.opt == 'add' ? '+' : '-') + this.changeBook.quantity)
      }
    }
	}
</script>

<style scoped>
  >>> .el-form-item__content .el-input-group {
    vertical-align: middle !important;
  }
  >>> .el-form-item__content {
    line-height: 40px !important;
  }
  >>> .el-form-item {
    margin-bottom: 0px !important;
  }
</style>
